<template>
	<view class="content">
		<view class="group">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">	
				<view class="list" v-for="(item,index) in orderList" :key="index" >
					<view class="list_status">{{item.refundStatus | fiflterStatus}}</view>
					<view class="goodsgroup" v-for="(lItem,lIndex) in item.cartInfo" :key="lIndex">
						<view class="goods">
							<image class="goods_img" :src="lItem.productInfo.image" mode="aspectFill"></image>
							<view class="goods_info">
								<view class="goods_name ellipsis_2">{{lItem.productInfo.storeName}}</view>
								<view class="goods_attr">{{lItem.attrInfo.sku}}</view>
								<view class="goods_price">
									<view class="price">
										<view class="pricesign iconfont">&#xe604;</view>
										<view class="money">{{lItem.attrInfo.price}}
											<text>+{{lItem.attrInfo.integral}}通宝</text>
										</view>
									</view>
									<view class="goods_num">x{{lItem.cartNum}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="order_total">
						<view class="total_name">合计</view>
						<view class="total_price">
							<view class="sign iconfont">&#xe604;</view>
							<view class="price">{{item.payPrice}} <text>+{{item.totalIntegral}}通宝</text></view>
						</view>
					</view>
					<view class="order_btn" >
						<view class="btn_list" >
							<view class="btncancel" v-if="item.refundStatus == 2" @click.stop="cancelOrder(item)">删除订单</view>
							<view class="btnpay" @click="refundDetail(item)">查看进度</view>
						</view>
					</view>
					
				</view>
				
			</mescroll-body>
				
		</view>
		
		
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					auto: false, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 空空如也 ~', // 提示
						btnText: '刷新',
						// 列表第一页无任何数据时,显示的空布局
						// use : 是否启用
						// icon : 空布局的图标路径 (支持网络路径)
						// tip : 提示文本
						// btnText : 按钮文本
						// fixed : 是否使用定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,所以最终还是会降级为absolute)
						// top : fixed定位的top值 (完整的单位值,如"100rpx", "10%";)
						// zIndex : fixed定位z-index值
					},
					textNoMore: "--我也是有底线的--" //没有更多数据的提示文本
				},
				orderList:[]
			}
		},
		onLoad(options) {
			console.log(options)
			let that = this;
			uni.$on('myRrfund',function(data){
			    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				that.mescroll.resetUpScroll(); //调用加载
			})
		},
		filters:{
			fiflterStatus: function (val) {
				if (val == 1) {
					return '退款中'
				} else if (val == 2) {
					return '退款完成'
				} 
			}
		},
		methods: {
			downCallback(){
				this.mescroll.resetUpScroll(); //调用加载
			},
			upCallback(page) {
				//联网加载数据
				console.log(page)
				let that = this;
				that.api.getAfterSalesList({
					page:page.num,
					limit:page.size,
				}).then(res => {
					console.log(res,"===")
					let curPageData =res.data.records;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = res.data.pages;
					//设置列表数据
					setTimeout(() => { // 模拟效果
						if (page.num == 1) this.orderList = []; //如果是第一页需手动置空列表
						this.orderList = this.orderList.concat(curPageData); //追加新数据
						console.log(this.orderList,"-----");
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
					}, 500)
					
				}).catch(err => {
					that.mescroll.endErr()
				})
				
			},
			// 查看进度
			refundDetail: function (item) {
				if (item.refundStatus == 1) {
					uni.navigateTo({
						url: '../refundDetail/refundDetail?key=' + item.unique,
					});
				} else if (item.refundStatus == 2) {
					uni.navigateTo({
						url: '../refundSuccess/refundSuccess?key=' + item.unique,
					});
				}
				
			},
			// 删除订单
			cancelOrder: function (item) {
				let that = this;
				that.api.cancelShoppingOrder({
					uni:item.unique
				}).then(res => {
					console.log(res)
					that.tui.toast(res.data)
					setTimeout(function () {
						uni.$emit('myOrder',{msg:'页面更新'})
						uni.$emit('myRrfund',{msg:'页面更新'})
					},500)
				})
				
				
			}
			
			
			
		},
		
		
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		background: #F5F5F5;
		font-family: 'PingFang SC';
		font-size: 28rpx;
		color: #212121;
		padding: 20rpx 0;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	
	.group {
		width: 100%;
		box-sizing: border-box;
		margin: 0rpx auto 0 auto;
		padding: 0 20rpx;
		.list {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 12rpx;
			// padding: 0 22rpx;
			margin-bottom: 20rpx;
			.list_status {
				width: 100%;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #E42221;
				line-height: 40rpx;
				padding: 20rpx 22rpx;
			}
			.goodsgroup {
				width: 100%;
				box-sizing: border-box;
				border-bottom: 2rpx solid #F5F5F5;
				padding: 0 22rpx 0rpx 22rpx;
				.goods {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					// align-items: center;
					font-size: 28rpx;
					color: #140005;
					padding-bottom: 25rpx;
					.goods_img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 16rpx;
					}
					.goods_info {
						width: calc(100% - 160rpx);
						box-sizing: border-box;
						padding: 10rpx 0 10rpx 20rpx;
						display: flex;
						flex-flow: column;
						justify-content: space-between;
						.goods_name {
							width: 100%;
							box-sizing: border-box;
							line-height: 40rpx;
						}
						.goods_attr {
							width: 100%;
							box-sizing: border-box;
							font-size: 22rpx;
							color: #999999;
						}
						.goods_price {
							width: 100%;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 22rpx;
							color: #212121;
							.price {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								font-size: 28rpx;
								color: #E42221;
								.pricesign  {
									color: #FFDA71;
									font-size: 26rpx;
									// padding-top: 5rpx;
								}
							}
							
						}
						
					}
					
					
				}
				
				
			}
			
			.order_total {
				width: 100%;
				box-sizing: border-box;
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 22rpx;
				border-bottom: 2rpx solid #F5F5F5;
				.total_price {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 28rpx;
					color: #E42221;
					.sign {
						font-size: 32rpx;
						color: #FFDA71;
					}
					
				}
			}
			.order_btn {
				width: 100%;
				box-sizing: border-box;
				.btn_list {
					width: 100%;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 24rpx;
					padding: 26rpx 22rpx;
					view {
						line-height: 50rpx;
						padding: 0 22rpx;
						border-radius: 100rpx;
						&:last-child {
							margin-left: 28rpx;
						}
					}
					.btncancel {
						border: 1rpx solid #999999;
						color: #999999;
					}
					.btnpay {
						border: 1rpx solid #E42221;
						color: #E42221;
						// margin-left: 28rpx;
					}
					
				}
				
			}
			
		}
		
	}
	

</style>
